<!DOCTYPE html>

<html lang="en" xmlns:th="http://www.thymeleaf.org">
    <meta charset="UTF-8">
    <title>城市道路渠化信息服务系统</title>
    <link th:href="@{/css/bootstrap.min.css}" rel="stylesheet">
</head>
    <style>
        .bg {
              position: absolute;
              background: url("../img/bg4.png");
              background-attachment: fixed;
              background-position: center;
              background-size: cover;
              width: 100%;
              height: 100%;
        }
        .login{
            padding: 20px;

            width:400px;
            height: 400px;
            /*background:green;*/
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-200px;
            margin-top:-150px;
            border-radius:5px;
            background: white;
            background-color: rgba(0, 0, 0, 0.3);
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);
        }
        /*h1{*/
        /*    position: absolute;*/
        /*    left:50%;*/
        /*    top:50%;*/
        /*    margin-left:-230px;*/
        /*    margin-top:-230px;*/
        /*}*/
        .form-group{
            color: #fff;
            background-color: transparent !important;
            outline: none;
            border: none;
            border-bottom: 1px solid #fff;
        }
        .login .form-group .form-control{

            color: black;
            background-color: transparent !important;
            outline: none;
            border: none;
            /*border-bottom: 1px solid #fff;*/
        }
        .login .Mybutton{
            font-weight: bold;
            text-align: center;
            width: 100%;
            background-color: transparent !important;
        }
    </style>
<body>
<!--<p th:text="${msg}"></p>-->
<!--<form action="/uav/login">-->
<!--    用户名:<input type="text" name="username">-->
<!--    密码:<input type="password" name="password">-->
<!--    <input type="submit" value="登录">-->
<!--</form>-->

<div class="bg"></div>
<!--<p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}">222-->

<!--信息提示框-->
<div style="width: 300px;
            background-color: rgba(0, 0, 0, 0.3);color: red;
            box-shadow: 0 15px 25px rgba(0, 0, 0, 0.3);" th:if="${not #strings.isEmpty(msg)}" class="alert alert-warning alert-dismissible fade show" role="alert">
    <strong th:text="${msg}"></strong>

    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
</div>
<!--</p>-->
<!--登录框-->
<div class="login">
    <form action="/uav/login">
        <h2 style="text-align: center;color: white;margin-bottom: 20px">城市道路渠化<br/>信息服务系统</h2>
<!--        <p style="color: red" th:text="${msg}" th:if="${not #strings.isEmpty(msg)}"> </p>-->
<!--        <p style="color: green;text-align: center" th:text="${msg1}" th:if="${not #strings.isEmpty(msg1)}"> </p>-->

        <div class="form-group">
            <label for="exampleInputEmail1">用户名</label>
            <input name="username" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
<!--            <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>-->
        </div>
        <div class="form-group">
            <label for="exampleInputPassword1">密码</label>
            <input name="password" type="password" class="form-control" id="exampleInputPassword1">
        </div>
<!--        <div class="form-group form-check">-->
<!--            <input type="checkbox" class="form-check-input" id="exampleCheck1">-->
<!--            <label class="form-check-label" for="exampleCheck1">Check me out</label>-->
<!--        </div>-->
        <p><button type="submit" class="btn btn-primary Mybutton">登录</button></p>
        <p><button type="button" class="btn btn-primary Mybutton" data-toggle="modal" data-target="#myModal">注册</button></p>
    </form>
</div>
<!--注册拟态框-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" style="width: 533px;">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">
                    注册界面
                </h4>
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                    &times;
                </button>
            </div>
            <div class="modal-body">
<!--                把表单数据请求到后端接口-->
                <form action="/uav/register">
                     <div class="form-group">
                        <label for="exampleInputEmail1" style="color: black!important;">用户名</label>
                        <input name="username" class="form-control" aria-describedby="emailHelp" required="">
                     </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1" style="color: black!important;">密码</label>
                        <input name="password" type="password" class="form-control" placeholder="Password" required="">
                    </div>
                    <div class="form-group">
                        <label for="exampleInputPassword1" style="color: black!important;">确认密码</label>
                        <input name="Cpassword" type="password" class="form-control" placeholder="Confirm Password" required="">
                    </div>
                    <p>
                        <button type="submit" class="btn btn-primary Mybutton" data-toggle="modal" style="margin-left: 400px">确认注册</button>
                    </p>

                </form>
            </div>
<!--            <div class="modal-footer">-->
<!--            </div>-->
        </div>
    </div>
</div>
<script type="text/javascript" th:src="@{/js/jquery-3.2.1.slim.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/popper.min.js}" ></script>
<script type="text/javascript" th:src="@{/js/bootstrap.min.js}" ></script>


</body>
</html>
